<template>
	<view class="custom-push">
		<div class="push-top">
			<view class="custom-nav-bar">
				<!-- 返回按钮 -->
				<view class="nav-back" @click="goBack">
					<image src="/static/back.png" mode=""></image>
				</view>
				<!-- 页面标题 -->
				<view class="nav-title">定制推送</view>
			</view>
			<div class="pushtitle">
				<h3>说出您的意向</h3>
				<p>让我们为您精选推送</p>
			</div>
		</div>
		<div class="push-content">
			<u--form :model="formData" ref="uForm" :labelWidth="80">
				<div class="form-item">
					<div class="title">您想居住的区域是？</div>
					<div class="form-area" style="padding-right: 15px;">
						<div class="arealeft">
							<image src="/static/mine/quyuxinxi.png" mode=""></image>
							<p>区域</p>
						</div>
						<u-form-item prop="formData.community">
							<picker @change="bindPickerChange" :value="currentIndex" :range="typeList">
							    <view class="choose-type">
									{{ chooseType }}
								</view>
							 </picker>
						</u-form-item>
					</div>
				</div>
				<div class="form-item">
					<div class="title">您的预算是多少？</div>
					<div class="form-area">
						<u-form-item prop="formData.min_rent">
							<u--input
								v-model="formData.min_rent"
								border="none"
								input-align="center"
								placeholder="最小租金">
							</u--input>
						</u-form-item>
						-
						<u-form-item prop="formData.max_rent" style="width: 100px;">
							<u--input
								v-model="formData.max_rent"
								border="none"
								input-align="center"
								placeholder="最大租金">
							</u--input>
						</u-form-item>
					</div>
				</div>
				<div class="form-item">
					<div class="title">您想住的楼层？</div>
					<div class="form-area">
						<u-form-item prop="formData.min_floor">
							<u--input
								v-model="formData.min_floor"
								border="none"
								input-align="center"
								placeholder="最低楼层">
							</u--input>
						</u-form-item>
						-
						<u-form-item prop="formData.max_floor">
							<u--input
								v-model="formData.max_floor"
								border="none"
								input-align="center"
								placeholder="最高楼层">
							</u--input>
						</u-form-item>
					</div>
				</div>
				<div class="form-item">
					<div class="title">您想住几居室？</div>
					<uni-data-checkbox mode="tag" v-model="formData.house_type" :localdata="roomTypeList">
					</uni-data-checkbox>
				</div>
				<div class="form-item" style="margin-top: 15px;">
					<div class="title">您想寻找押金付款的是？</div>
					<uni-data-checkbox mode="tag" v-model="formData.payment_type" :localdata="depositArr"></uni-data-checkbox>
				</div>
				<div class="form-item" style="margin-top: 15px;">
					<div class="title">您想寻找房源哪些低特色标签？</div>
					<uni-data-checkbox mode="tag" multiple v-model="tagsList" :localdata="checkboxList"></uni-data-checkbox>
				</div>
			</u--form>
			<div class="tjbutton" @click="show = true">提交</div>
		</div>
		<u-modal :show="show" showCancelButton="true" :content='content' @confirm="handleConfirm" @cancel="handleCanle"></u-modal>
	</view>
</template>

<script>
	import { getHouseOptionList, addPushInfo } from '@/api/mine.js'
	export default {
		data() {
			return {
				currentIndex: 0,
				typeList: [],
				chooseType: '请选择',
				formData:{
					community:'',
					min_rent: '',
					max_rent: '',
					min_floor: '',
					max_floor: '',
					house_type: '',
					payment_type: '',
					tags: ''
				},
				roomTypeList: [],
				depositArr: [],
				showPicker: false,
				checkboxList: [],
				tagsList: [],
				show:false,
				content:'确认提交定制推送？'
			}
		},
		onLoad() {
			this.getCommunityList();
			this.getHourseType();
			this.getPaymentType();
			this.getHourseTags();
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail);
				this.currentIndex = e.detail.value;
				this.chooseType = this.typeList[this.currentIndex];
				this.formData.community = String(Number(e.detail.value) + 1);
			},
			async getCommunityList () {
				const res = await getHouseOptionList({cid: '2'})
				if (res.response.statusCode === 200) {
					const valuesArray = Object.values(res.data.data);
					console.log(valuesArray,'res.data.data');
					this.typeList = valuesArray;
				}
			},
			async getHourseType () {
				const res = await getHouseOptionList({cid: '5'})
				if (res.response.statusCode === 200) {
					const valuesArray = Object.values(res.data.data);
					// console.log(valuesArray,'res.data.data');
					this.roomTypeList = valuesArray.map((item,index) => {
						return {
							text: item,
							value: index + 1
						}
					})
				}
			},
			async getPaymentType () {
				const res = await getHouseOptionList({cid: '7'})
				if (res.response.statusCode === 200) {
					const valuesArray = Object.values(res.data.data);
					// console.log(valuesArray,'res.data.data');
					this.depositArr = valuesArray.map((item,index) => {
						return {
							text: item,
							value: index + 1
						}
					})
				}
			},
			async getHourseTags () {
				const res = await getHouseOptionList({cid: '8'})
				if (res.response.statusCode === 200) {
					const valuesArray = Object.values(res.data.data);
					// console.log(valuesArray,'res.data.data');
					this.checkboxList = valuesArray.map((item,index) => {
						return {
							text: item,
							value: index + 1
						}
					})
				}
			},
			async handleConfirm () {
				this.formData.house_type = String(this.formData.house_type);
				this.formData.payment_type = String(this.formData.payment_type);
				this.formData.tags = this.tagsList.join(',');
				console.log(this.formData, '确认提交');
				const res = await addPushInfo(this.formData);
				if (res.response.statusCode === 200) {
					uni.showToast({
						title: '提交成功！',
						icon: 'success'
					});
					uni.switchTab({
						url:'/pages/mine/mine'
					});
				} else {
					uni.showToast({
						title: '提交失败！',
						icon: 'fail'
					});
				}
			},
			handleCanle () {
				this.show = false;
			},
			goBack() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.push-top{
	width: 100%;
	height: 300px;
	background: url('../../static/mine/pushbg.jpg') center no-repeat;
	background-size: 100% 100%;
}
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
	image{
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}
.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}
.pushtitle{
	margin: 40px auto auto 40px;
	h3{
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24px;
		color: #017ACB;
		line-height: 33px;
		letter-spacing: 1px;
		text-stroke: 1px #017ACB;
	}
	p{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 13px;
		color: #017ACB;
		line-height: 30px;
	}
}
.push-content{
	width: 90%;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.01);
	border-radius: 20px 20px 0px 0px;
	margin-top: -50px;
	padding: 20px;
	.title{
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 15px;
		color: #4F5963;
		margin-bottom: 14px;
	}
	.form-area{
		// width: 86%;
		margin: 15px auto;
		// padding: 0 20px;
		height: 40px;
		background: #F5F6FA;
		border-radius: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.arealeft{
			display: flex;
			align-items: center;
			padding-left: 20px;
			image{
				width: 16px;
				height: 12px;
				margin-right: 10px;
			}
			p{
				font-weight: 400;
				font-size: 13px;
				color: #333333;
			}
		}
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag{
		padding: 10px 20px !important;
		border-radius: 18px;
		border: none;
	}
	.tjbutton{
		width: 90%;
		height: 44px;
		background: #0095F8;
		box-shadow: 0px 2px 4px 0px rgba(0,149,248,0.5);
		border-radius: 22px;
		margin: 20px auto;
		text-align: center;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
		line-height: 44px;
	}
}
</style>
